<template>
  <el-container>
    <el-header class="singerHeader">
      <el-button type="primary" round size="mini" @click="batchDeleteSinger">批量删除</el-button>
      <el-input v-model="querySinger" placeholder="请输入内容" size="mini" @input="aggregation"></el-input>
      <el-button type="primary" round size="mini" @click="addSingerVisible=true">添加歌手</el-button>
    </el-header>
    <el-main>
      <el-table :data="SingerData" style="width: 100%" height="746px" border :header-cell-style="headercellstyle"
        :cell-style="cellstyle" ref="multipleTable">
        <el-table-column type="selection" width="40"></el-table-column>

        <el-table-column label="歌手图片" width="150" align="center">
          <template slot-scope="scope">
            <div class="singerImg">
              <img :src="getImgUrl(scope.row.pic)">
              <el-upload action="#" accept="image/png,image/gif,image/jpg,image/jpeg" :multiple="multiple"
                :show-file-list="showfileList" :http-request="(params) =>uploadSectionFile(params, scope.row)">
                <el-button size="mini" type="primary">点击上传</el-button>
                <el-tooltip content="只能上传jpg/png文件，且不超过500kb" placement="bottom" effect="light">
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </el-upload>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="歌手姓名" width="100" align="center">
        </el-table-column>

        <el-table-column label="性别" align="center" width="50">
          <template slot-scope="scope">
            {{ changesex(scope.row.sex) }}
          </template>
        </el-table-column>

        <el-table-column prop="birth" label="出生日期" width="100" align="center">
        </el-table-column>

        <el-table-column prop="location" label="出生地点" width="180" align="center">
        </el-table-column>

        <el-table-column label="简介" align="center">
          <template slot-scope="scope">
            <el-input :value="scope.row.introduction" placeholder="简介" type="textarea" resize="none" rows="4">
            </el-input>
          </template>
        </el-table-column>

        <el-table-column align="center" width="150">
          <template slot="header">
            <span>歌曲管理</span>
          </template>
          <template slot-scope="scope">
            <el-button type="info" round size="mini" @click="songEdit(scope.$index)">歌曲管理</el-button>
          </template>
        </el-table-column>

        <el-table-column align="center" width="200">
          <template slot="header">
            <span>操作</span>
          </template>
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDeleteSinger(scope.$index)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <el-dialog title="添加歌手" :visible.sync="addSingerVisible" width="400px" center>
        <el-form :model="Addsingerform">
          <el-form-item label="歌手名称" :label-width="formLabelWidth" size="mini">
            <el-input v-model="Addsingerform.name" autocomplete="off" placeholder="歌手名"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth" size="mini">
            <el-radio-group v-model="Addsingerform.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="生日" :label-width="formLabelWidth" size="mini">
            <el-date-picker type="date" placeholder="选择日期" v-model="Addsingerform.birth" style="width: 100%;"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="地区" :label-width="formLabelWidth" size="mini">
            <el-input v-model="Addsingerform.location" autocomplete="off" placeholder="地区"></el-input>
          </el-form-item>
          <el-form-item label="简介" :label-width="formLabelWidth" size="mini">
            <el-input type="textarea" placeholder="请输入内容" v-model="Addsingerform.introduction"
              value-format="yyyy-MM-dd">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addSingerVisible=false" round size="small">取 消</el-button>
          <el-button type="primary" @click="addSinger" round size="small">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="修改歌手" :visible.sync="editVisible" width="400px" center>
        <el-form :model="Editsingerform" ref="form" label-width="80px">
          <el-form-item prop="name" label="歌手名" size="mini">
            <el-input v-model="Editsingerform.name" placeholder="歌手名"></el-input>
          </el-form-item>
          <el-form-item label="性别" size="mini">
            <el-radio-group v-model="Editsingerform.sex">
              <el-radio :label="0">女</el-radio>
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">组合</el-radio>
              <el-radio :label="3">不明</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="生日" size="mini">
            <el-date-picker type="date" placeholder="选择日期" v-model="Editsingerform.birth" style="width:100%"
              value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item prop="location" label="地区" size="mini">
            <el-input v-model="Editsingerform.location" placeholder="地区"></el-input>
          </el-form-item>
          <el-form-item prop="introduction" label="简介" size="mini">
            <el-input v-model="Editsingerform.introduction" placeholder="简介" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button size="mini" @click="editVisible = false">取消</el-button>
          <el-button size="mini" @click="editSave">确定</el-button>
        </span>
      </el-dialog>
    </el-main>
    <el-footer>
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="pagesize"
        @current-change="changePage" style="text-align: center;">
      </el-pagination>
    </el-footer>
  </el-container>
</template>

<script>
 import {
    addSinger,
    delSinger,
    updateSinger,
    querySinger,
    getAllSinger,
    singerSize,
    batchDelSinger,
  } from "../api/singer";
  import {
    uploadImg,
  } from "../api/util.js";
  import {
    mixin,
  } from "../mixin/mixin.js";
  export default {
    mixins: [mixin],
    data() {
      return {
        addSingerVisible: false, //用于表示添加歌手模态框是否显示
        editVisible: false, //用于表示修改歌手模态框是否显
        querySinger: '', //根据歌手名模糊查询歌手
        SingerData: [], //表格中的数据
        Addsingerform: {
          name: '',
          sex: '',
          birth: '',
          location: '',
          introduction: '',
        },
        Editsingerform: {
          id: '',
          name: '',
          sex: '',
          birth: '',
          location: '',
          introduction: '',
        },
        formLabelWidth: '80px',
        pagesize: 10,
        page: 0,
        total: 0,
        multiple: false,
        showfileList: false,
      }
    },
    /*
     *  需要在组件生成前，请求歌手数据。
     */
    created() {
      this.aggregation()
    },
    computed: {
      headercellstyle() {
        return {
          padding: 0,
          height: '25px',
        }
      },
      cellstyle() {
        return {
          padding: '0px 0px 0px 0px',
        }
      },
    },
    methods: {
      /*
       *   getSingerData获取歌手信息
       *   msg 代表模糊查询
       */
      getSingerData(msg) {
        if (msg === undefined)
          msg = '';
        querySinger(this.page, this.pagesize, msg)
          .then((res) => {
            if (res.code === 1) {
              this.SingerData = res.data;
            }
          });
      },
      /*
       *  querySingerSize
       *   查询歌手数量
       */
      querySingerSize(msg) {
        if (msg === undefined)
          msg = '';
        singerSize(msg)
          .then(res => {
            if (res.code === 1) {
              this.total = +res.data;
            }
          });
      },
      /**
       *   聚合操作：
       *    一次性进行歌手查询，页码查询
       */
      aggregation() {
        this.getSingerData(this.querySinger);
        this.querySingerSize(this.querySinger);
      },
      /*
       * handleDeleteSinger删除单个歌手
       */
      handleDeleteSinger(index) {
        let id = this.SingerData[index].id;
        delSinger(id)
          .then(res => {
            this.aggregation();
          });
      },
      /*
       * batchDeleteSinger 批量删除歌手
       * this.$refs.multipleTable.selection 返回选中的对象数组。
       *  使用上述的数组，map返回id数组
       *  调用后端API删除
       *  删除完要进行聚合(重新请求一次数据  歌手数据和分页数据)
       */
      batchDeleteSinger() {
        batchDelSinger(this.$refs.multipleTable.selection.map(a => a.id))
            .then(res => {
              if (res.code == 1) {
                this.notify("删除成功", "success");
              } else {
                this.notify("删除失败","error");
              }
            });
        this.aggregation();
      },
      handleEdit(index, row) {
        this.editVisible = true;
        this.Editsingerform = row;
      },
      editSave() {
        let params = new URLSearchParams();
        params.append('id', this.Editsingerform.id);
        params.append('name', this.Editsingerform.name);
        params.append('sex', this.Editsingerform.sex);
        params.append('pic', this.Editsingerform.pic);
        params.append('birth', this.Editsingerform.birth);
        params.append('location', this.Editsingerform.location);
        params.append('introduction', this.Editsingerform.introduction);
        updateSinger(params)
          .then(res => {
            if (res.code == 1) {
              this.notify("添加成功", "success");
            } else {
              this.notify("添加失败","error");
            }
          });
        this.editVisible = false;
      },
      //转向歌曲管理页面
      songEdit(index) {
        console.log(index);
        let {id, name } = this.SingerData[index];
        this.$router.push({
          path: `/Song`,
          query: {
            id,
            name
          }
        });
      },
      addSinger() {
        let params = new URLSearchParams();
        params.append('name', this.Addsingerform.name);
        params.append('sex', this.Addsingerform.sex);
        params.append('pic', '/img/singerPic/hhh.jpg');
        params.append('birth', this.Addsingerform.birth);
        params.append('location', this.Addsingerform.location);
        params.append('introduction', this.Addsingerform.introduction);
        addSinger(params)
          .then(res => {
            if (res.code == 1) {
              this.notify("添加成功","success");
            } else {
              this.notify("添加失败","error");
            }
          })
        this.addSingerVisible = false;
        this.aggregation();
      },
      changePage(val) {
        this.page = val;
        this.getSingerData(this.querySinger);
      },
      async uploadSectionFile(files, row) {
        //* 1. 图片处理
        const {file} = files;
        //  2. 文件检查
        if (!this.onBeforeUpload(file)){
          this.notify("添加失败", "error");
        }
        //* 3. 图片上传
        let formData = new FormData();
        formData.append('uploadPic', file);
        uploadImg(formData)
          .then(res => {
            if (res.code == 1) {
              row.pic = '/img/singerPic/' + res.data;
              let params = new URLSearchParams();
              params.append('id', row.id);
              params.append('name', row.name);
              params.append('sex', row.sex);
              params.append('pic', row.pic);
              params.append('birth', row.birth);
              params.append('location', row.location);
              params.append('introduction', row.introduction);
              updateSinger(params);
              this.notify("添加成功", "success");
            } else {
              this.notify("添加失败","error");
            }
            return res;
          }).catch(err => {
            console.log(err);
          });
      },

    },
  }
</script>

<style>
  .singerHeader {
    background-color: #ffdee9;
    background-image: linear-gradient(43deg, #ffdee9 0%, #ffdee9 46%, #ffdee9 100%);
    color: #333;
    text-align: center;
    display: flex;
    align-items: center;
    padding: 0;
  }
  
  .singerHeader .el-button {
    margin: 0 10px;
  }
  
  .singerHeader .el-input {
    width: 200px;
  }
  
  .el-main {
    padding: 0;
  }
  
  .singerImg img {
    width: 100px;
    height: 100px;
    display: block;
    margin: 0 auto;
  }
  
  .singerImg .el-button {
    margin-left: 19px;
  }
  
  .singerImg i {
    vertical-align: top;
  }
</style>
